import React, { useState, useEffect, useRef } from 'react';
import './index.css';
import Navigation from '../../components/navigation';
import a5 from '../../assets/img/a5.png';

const CustomerChat: React.FC = () => {
  const [messages, setMessages] = useState([
    {
      id: 1,
      type: 'system',
      content: '终于等到您了~ 很高兴为您服务，请描述您遇到的问题，您的小可爱正在骑马赶来~',
      time: '09:31:40',
      sender: 'system'
    }
  ]);
  const [inputMessage, setInputMessage] = useState('很高兴为您服务,请描述您的问题');
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSendMessage = () => {
    if (inputMessage.trim()) {
      const newMessage = {
        id: messages.length + 1,
        type: 'user',
        content: inputMessage,
        time: new Date().toLocaleTimeString('zh-CN', { 
          hour: '2-digit', 
          minute: '2-digit',
          second: '2-digit'
        }),
        sender: 'user'
      };
      setMessages([...messages, newMessage]);
      setInputMessage('');
      
      // 模拟客服回复
      setTimeout(() => {
        const botReply = {
          id: messages.length + 2,
          type: 'bot',
          content: '感谢您的咨询，我们的客服人员会尽快为您解答问题。请问还有其他需要帮助的吗？',
          time: new Date().toLocaleTimeString('zh-CN', { 
            hour: '2-digit', 
            minute: '2-digit',
            second: '2-digit'
          }),
          sender: 'bot'
        };
        setMessages(prev => [...prev, botReply]);
      }, 1000);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  const commonQuestions = [
    {
      id: 1,
      question: '什么是商用?',
      answer: '商用是指个人或组织将网站素材用于任何商业目的，包括但不限于：宣传材料、公司报告、微商、淘宝卖家、自媒体等使用场景。'
    },
    {
      id: 2,
      question: '购买企业VIP是否可以获得商用授权?',
      answer: '购买企业VIP并付款后，可以在线申请商用授权并下载到本地，在授权范围内享受全包保护。'
    },
    {
      id: 3,
      question: '如何添加子账号?',
      answer: '可以复制链接发送给同事，同事登录后申请加入，需要管理员审核（双方都需要在电脑端操作）。'
    },
    {
      id: 4,
      question: '企业套餐下载素材范围:',
      answer: '企业套餐可以无限下载全站所有类目（除创意Pro外）的自产和全球精选素材用于商用，不区分图片、视频、音乐。'
    }
  ];

  return (
    <div className="customer-chat-page">
      <Navigation />
      
      <div className="chat-container">
        <div className="chat-header">
          <div className="chat-title">
            <span className="chat-icon">💬</span>
            <span>在线客服</span>
          </div>
          <div className="chat-controls">
            <button className="control-btn">🔊</button>
            <button className="control-btn">−</button>
            <button className="control-btn">□</button>
            <button className="control-btn">×</button>
          </div>
        </div>

        <div className="chat-content">
          <div className="chat-messages">
            {messages.map((message) => (
              <div key={message.id} className={`message ${message.type}`}>
                <div className="message-time">{message.time}</div>
                <div className="message-bubble">
                  {message.content}
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>

          <div className="chat-input-area">
            <div className="input-toolbar">
              <button 
                className="tool-btn"
                onClick={() => setShowEmojiPicker(!showEmojiPicker)}
              >
                😊
              </button>
              <button className="tool-btn">📷</button>
              <button className="tool-btn">✂️</button>
            </div>
            <div className="input-wrapper">
              <input
                type="text"
                value={inputMessage}
                onChange={(e) => setInputMessage(e.target.value)}
                onKeyPress={handleKeyPress}
                className="message-input"
                placeholder="很高兴为您服务,请描述您的问题"
              />
              <button 
                className="send-btn"
                onClick={handleSendMessage}
              >
                发送
              </button>
            </div>
          </div>
        </div>

        <div className="chat-sidebar">
          <div className="sidebar-title">常见问题</div>
          <div className="faq-list">
            {commonQuestions.map((faq) => (
              <div key={faq.id} className="faq-item">
                <div className="faq-question">
                  {faq.id}. {faq.question}
                </div>
                <div className="faq-answer">
                  {faq.answer}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* 返回顶部按钮 */}
      <div className='fhdb' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        <img src={a5} alt="返回顶部" style={{ marginLeft: '25px', marginTop: '20px' }} />
      </div>
    </div>
  );
};

export default CustomerChat; 